import { useState, useEffect } from 'react';

export default (props) => {
    const [count, setCount] = useState(0);
    const [count1, setCount1] = useState(0);

    // useEffect(() => {
    //     console.log('我相当于 componetDidMount 生命周期');
    //     return () => {
    //         console.log('我相当于 componetWillUnmount 生命周期');
    //     };
    //     // 如果第二个参数是空数组，表示只会在组件第一次加载时，执行一次
    // }, []);

    useEffect(() => {
        console.log('我相当于 componetDidUpdate 生命周期');
        // 如果数组内有值，表示数组内的状态发生变化时会执行这个函数
    }, [count]);

    return (
        <div className="w-1/2 mx-auto pt-28 text-lg">
            <h3>{count}</h3>
            <button onClick={() => setCount(count + 1)}>👍 + 1</button>

            <hr />

            <h3>{count1}</h3>
            <button onClick={() => setCount1(count1 + 1)}>👍 + 1</button>
        </div>
    );
};
